<template>
	<view>
		<h-dark :title="t('vip.title')"></h-dark>
		<view class="px-[30rpx] my-[30rpx] text-xl">
			{{t('vip.vipTitle')}}
		</view>
		<view class="wrap mb-[20rpx]">
			<u-swiper :list="vip.list" :current="vip.current" :effect3d="true" :autoplay="false" mode="none"
				bg-color="none" :showText="true" :showTips="true" @change="changeHandle"></u-swiper>
		</view>
		<view class="mx-[30rpx] pt-[30rpx] mb-[20rpx] rounded-xl">
			<view class="mb-[30rpx]">
				<text class="">{{vip.currentVip.text}} {{t('vip.upgradeConditions')}}</text>
			</view>
			<view class=" bg-[#2C326B] rounded-xl p-[30rpx]">
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						{{t('vip.totalInvest')}}
					</view>
					<view class="">
						{{formatMoney(data.user.total_invest)}}/{{vip.currentVip.money}}
					</view>
				</view>
				<view class="flex justify-between">
					<view class="text-[#00D2E0]">
						{{t('vip.levelNum')}}
					</view>
					<view class="">
						{{data.user.invite_count}}/{{vip.currentVip.level1_num}}
					</view>
				</view>
			</view>
		</view>
		<view class="mx-[30rpx] pt-[30rpx] rounded-xl">
			<view class="mb-[30rpx]">
				<text class="">{{vip.currentVip.text}} {{t('vip.rights')}}</text>
			</view>
			<view class=" bg-[#2C326B] rounded-xl p-[30rpx]">
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						{{t('vip.itemNum')}}
					</view>
					<view class="">
						{{vip.currentVip.item_num}}
					</view>
				</view>
				<view class="flex justify-between mb-[20rpx]">
					<view class="text-[#00D2E0]">
						{{t('vip.itemAddRate')}}
					</view>
					<view class="">
						{{vip.currentVip.item_add_rate}}%
					</view>
				</view>
				<view class="flex justify-between">
					<view class="text-[#00D2E0]">
						{{t('vip.mineSpeed')}}
					</view>
					<view class="">
						{{vip.currentVip.mine_speed}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { vipAll, getIndex } from '@/api/vip'
	import { formatMoney } from '@/utils/util'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('vip.title') })

	const data = reactive({
		user: {
			total_invest: 0
		},
		member: []
	})
	const vip = reactive({
		list: [],
		currentVip: [],
		current: 0
	})


	const getData = async () => {
		const res = await getIndex()
		data.user = res.user;
		data.member = res.member;
		const vips = await vipAll()
		vips.forEach((item : any, index : number) => {
			if (data.member.id >= item.id) {
				vip.current = index;
				vip.currentVip = item;
				item['locked'] = false;
				item['tips'] = t('vip.unlocked');
			} else {
				item['locked'] = true;
				item['tips'] = t('vip.locked');
			}
			item['textStyle'] = {
				color: item['text_color']
			}

			item['tipsStyle'] = {
				color: item['text_color']
			}
		})
		vip.list = vips;
	}

	const changeHandle = (index : number) => {
		vip.currentVip = vip.list[index];
	}

	getData()
</script>

<style lang="scss">
</style>